<!-- directive:title 等待动画 2 -->
<!-- directive:breadcrumb 等待动画 -->
<div class="panel-body">
    <div class="row">
        <div class="col-sm-4">
            <div class="sa">
                <div id="sa-loading" class="sa-loading"></div>
                <div id="sa-success" class="zhang-icon sa-success" style="display: none;">
                    <span class="sa-line sa-tip animateSuccessTip"></span>
                    <span class="sa-line sa-long animateSuccessLong"></span>
                    <div class="sa-placeholder rotatePlaceholder"></div>
                    <div class="sa-fix"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="sa">
                <div class="sa-loading"></div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="sa">
                <div class="zhang-icon sa-success" >
                    <span class="sa-line sa-tip animateSuccessTip"></span>
                    <span class="sa-line sa-long animateSuccessLong"></span>
                    <div class="sa-placeholder rotatePlaceholder"></div>
                    <div class="sa-fix"></div>
                </div>
            </div>
        </div>
    </div>
    <script ui-bs>
        function toSuccess(){
            document.getElementById('sa-loading').style.display="none";
            document.getElementById('sa-success').style.display="block";
        }
        setTimeout('toSuccess()', 3000);
    </script>
    <style ui-bs>
        .sa{ width: 30px; height: 30px; border: 1px solid red;overflow: hidden; }

        .sa-loading{width: 0.8em; height: 0.8em;position:relative; }
        .sa-loading::after { font-size:228%; content: ''; position: absolute; width: 0.8em; height: 0.8em; pointer-events: none; border: 3px solid #EDF8E7; border-top-color: #A5DC86; border-radius: 50%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-animation: rotateLoader 0.8s linear infinite forwards; animation: rotateLoader 0.8s linear infinite forwards; }
        @-webkit-keyframes rotateLoader { to { -webkit-transform: rotate3d(0, 0, 1, -360deg); transform: rotate3d(0, 0, 1, -360deg); } }
        @keyframes rotateLoader { to { -webkit-transform: rotate3d(0, 0, 1, -360deg); transform: rotate3d(0, 0, 1, -360deg); } }

        .zhang-icon { width: 0.8em; height: 0.8em; border: 3px solid gray; -webkit-border-radius: 0.4em; border-radius: 0.4em; border-radius: 50%; padding: 0; position: relative; box-sizing: content-box; }
        .zhang-icon.sa-success {border-color: #A5DC86;font-size:228%;}
        .zhang-icon.sa-success::before { -webkit-border-radius: 1.2em 0 0 1.2em; border-radius: 1.2em 0 0 1.2em!important; top: -0.07em; left: -0.33em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg)!important; -webkit-transform-origin: 0.6em 0.6em; transform-origin: 0.6em 0.6em; }
        .zhang-icon.sa-success::before,
        .zhang-icon.sa-success::after { content: ''; -webkit-border-radius: 0.4em; border-radius: 0.4em; border-radius: 50%; position: absolute; width: 0.7em; height: 1.2em; background: white; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
        .zhang-icon.sa-success.animate::after { -webkit-animation: rotatePlaceholder 4.25s ease-in; animation: rotatePlaceholder 4.25s ease-in; }
        .zhang-icon.sa-success::after { -webkit-border-radius: 0 1.2em 1.2em 0; border-radius: 0 1.2em 1.2em 0; top: -0.11em; left: 0.3em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0em 0.6em; transform-origin: 0em 0.6em; }
        .zhang-icon.sa-success .sa-line.sa-tip { width: 0.25em; left: 0.14em; top: 0.46em; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
        .zhang-icon.sa-success .sa-line { height: 3px; background-color: #A5DC86; display: block; border-radius: 1.02em; position: absolute; z-index: 2; }
        .animateSuccessTip { -webkit-animation: animateSuccessTip 0.75s; animation: animateSuccessTip 0.75s; }
        .zhang-icon.sa-success .sa-line.sa-long { -ms-transform: rotate(-45deg) \9; }
        .zhang-icon.sa-success .sa-line.sa-long { width: 0.47em; right: 0.08em; top: 0.38em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
        .animateSuccessLong { -webkit-animation: animateSuccessLong 0.75s; animation: animateSuccessLong 0.75s; }
        .zhang-icon.sa-success .sa-placeholder { width: 0.8em; height: 0.8em; border: 3px solid rgba(165, 220, 134, 0.2); -webkit-border-radius: 0.4em; border-radius: 0.4em; border-radius: 50%; box-sizing: content-box; position: absolute; left: -0.08em; top: -0.08em; z-index: 2; }
        .zhang-icon.sa-success .sa-fix { width: 0.05em; height: 0.9em; background-color: white; position: absolute; left: 0.28em; top: 0.08em; z-index: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
        @keyframes animateSuccessLong { 0% { width: 0; right: 0.46em; top: 0.54em; } 65% { width: 0; right: 0.46em; top: 0.54em; } 84% { width: 0.55em; right: 0em; top: 0.35em; } 100% { width: 0.47em; right: 0.08em; top: 0.38em; } }
        @-webkit-keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } }
        @keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } }
        @-webkit-keyframes animateSuccessTip { 0% { width: 0; left: 0.01em; top: 0.19em; } 54% { width: 0; left: 0.01em; top: 0.19em; } 70% { width: 0.5em; left: -0.08em; top: 0.37em; } 84% { width: 0.17em; left: 0.21em; top: 0.48em; } 100% { width: 0.25em; left: 0.14em; top: 0.45em; } }
        @keyframes animateSuccessTip { 0% { width: 0; left: 0.01em; top: 0.19em; } 54% { width: 0; left: 0.01em; top: 0.19em; } 70% { width: 0.5em; left: -0.08em; top: 0.37em; } 84% { width: 0.17em; left: 0.21em; top: 0.48em; } 100% { width: 0.25em; left: 0.14em; top: 0.45em; } }
        @-webkit-keyframes animateSuccessLong { 0% { width: 0; right: 0.46em; top: 0.54em; } 65% { width: 0; right: 0.46em; top: 0.54em; } 84% { width: 0.55em; right: 0em; top: 0.35em; } 100% { width: 0.47em; right: 0.08em; top: 0.38em; } }
        @keyframes animateSuccessLong { 0% { width: 0; right: 0.46em; top: 0.54em; } 65% { width: 0; right: 0.46em; top: 0.54em; } 84% { width: 0.55em; right: 0em; top: 0.35em; } 100% { width: 0.47em; right: 0.08em; top: 0.38em; } }
    </style>
</div>

